<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧园区管理系统 - UI/UX原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
        
        .iphone-frame {
            width: 390px;
            height: 844px;
            background-color: #111;
            border-radius: 55px;
            padding: 10px;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
        }
        
        .iphone-screen {
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 45px;
            overflow: hidden;
            position: relative;
        }
        
        .iphone-notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 30px;
            background-color: #111;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            z-index: 10;
        }
        
        .iphone-button {
            position: absolute;
            width: 4px;
            height: 80px;
            background-color: #222;
            right: -4px;
            top: 200px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        
        .page-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .page-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .page-button {
            padding: 8px 16px;
            background-color: #3b82f6;
            color: white;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-button:hover {
            background-color: #2563eb;
        }
        
        .page-button.active {
            background-color: #1e40af;
        }
        
        .page-description {
            margin-top: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .iphone-frame {
                margin-bottom: 30px;
            }
        }
    </style>
</head>
<body class="p-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">智慧园区管理系统 - UI/UX原型</h1>
        <p class="text-gray-600 mb-6">高保真交互设计原型，支持亮色/暗色模式，采用iOS设计风格</p>
        
        <div class="flex flex-wrap lg:flex-nowrap gap-8">
            <div>
                <div class="page-selector">
                    <button class="page-button active" data-page="login.html">登录页面</button>
                    <button class="page-button" data-page="home.html">首页</button>
                    <button class="page-button" data-page="profile.html">个人中心</button>
                    <button class="page-button" data-page="notice.html">公告页面</button>
                    <button class="page-button" data-page="repair.html">设备报修</button>
                    <button class="page-button" data-page="repair-history.html">报修记录</button>
                    <button class="page-button" data-page="water-service.html">送水服务</button>
                    <button class="page-button" data-page="water-service-apply.html">送水申请</button>
                    <button class="page-button" data-page="housing-list.html">房源查询</button>
                    <button class="page-button" data-page="housing-detail.html">房源详情</button>
                    <button class="page-button" data-page="parking.html">停车管理</button>
                    <button class="page-button" data-page="payment.html">账单支付</button>
                    <button class="page-button" data-page="visitor.html">访客管理</button>
                </div>
                
                <div class="iphone-frame">
                    <div class="iphone-notch"></div>
                    <div class="iphone-button"></div>
                    <div class="iphone-screen">
                        <iframe id="pageFrame" src="login.html" class="page-iframe"></iframe>
                    </div>
                </div>
            </div>
            
            <div class="flex-1 min-w-0">
                <div class="page-description">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4" id="pageTitle">登录页面</h2>
                    <div id="loginDesc">
                        <p class="text-gray-600 mb-3">登录页面提供了三种访问系统的方式：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>账号密码登录 - 适用于已注册用户</li>
                            <li>手机验证码登录 - 快速登录方式</li>
                            <li>游客模式 - 无需登录即可访问部分功能</li>
                        </ul>
                        <p class="text-gray-600">页面设计采用了玻璃拟态效果，支持系统亮色/暗色模式自动切换。</p>
                    </div>
                    
                    <div id="homeDesc" class="hidden">
                        <p class="text-gray-600 mb-3">首页是用户进入系统后的主界面，包含以下内容：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>顶部轮播图 - 展示园区重要通知和活动</li>
                            <li>快捷功能区 - 提供常用服务的快速入口</li>
                            <li>园区公告 - 显示最新公告信息</li>
                            <li>服务分类 - 按类别组织各种园区服务</li>
                        </ul>
                        <p class="text-gray-600">底部标签栏提供了主要功能区域的快速切换。</p>
                    </div>
                    
                    <div id="profileDesc" class="hidden">
                        <p class="text-gray-600 mb-3">个人中心页面展示用户信息和提供个人相关服务：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>用户基本信息 - 头像、姓名、企业等</li>
                            <li>我的服务 - 用户常用或收藏的服务</li>
                            <li>我的申请 - 用户提交的各类申请记录</li>
                            <li>账号设置 - 提供账号相关设置入口</li>
                        </ul>
                        <p class="text-gray-600">页面采用卡片式设计，信息层次清晰。</p>
                    </div>
                    
                    <div id="noticeDesc" class="hidden">
                        <p class="text-gray-600 mb-3">公告页面集中展示园区的各类通知：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>重要通知 - 置顶显示的紧急或重要信息</li>
                            <li>普通公告 - 按时间顺序排列的常规通知</li>
                            <li>分类筛选 - 可按公告类型进行筛选</li>
                        </ul>
                        <p class="text-gray-600">公告卡片显示标题、发布时间、摘要等信息，点击可查看详情。</p>
                    </div>
                    
                    <div id="waterServiceDesc" class="hidden">
                        <p class="text-gray-600 mb-3">送水服务页面提供园区饮用水配送服务：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>服务介绍 - 说明送水服务的规则和流程</li>
                            <li>申请记录 - 显示用户的送水申请历史</li>
                            <li>申请入口 - 提供新建送水申请的快捷方式</li>
                        </ul>
                        <p class="text-gray-600">页面设计简洁明了，操作流程清晰。</p>
                    </div>
                    
                    <div id="waterServiceApplyDesc" class="hidden">
                        <p class="text-gray-600 mb-3">送水申请页面用于提交新的送水服务请求：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>水品类选择 - 提供不同品牌和规格的水</li>
                            <li>数量选择 - 可调整订购数量</li>
                            <li>配送信息 - 填写配送地址和联系方式</li>
                            <li>支付方式 - 选择支付渠道</li>
                        </ul>
                        <p class="text-gray-600">表单设计符合iOS设计规范，交互友好。</p>
                    </div>
                    
                    <div id="housingListDesc" class="hidden">
                        <p class="text-gray-600 mb-3">房源查询页面展示园区内可租赁的各类空间：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>搜索功能 - 可按关键词搜索房源</li>
                            <li>筛选条件 - 提供多种筛选选项（类型、价格、面积等）</li>
                            <li>房源列表 - 以卡片形式展示房源基本信息</li>
                            <li>标签系统 - 通过标签快速识别房源特点</li>
                        </ul>
                        <p class="text-gray-600">页面采用响应式设计，信息展示全面但不拥挤。</p>
                    </div>
                    
                    <div id="housingDetailDesc" class="hidden">
                        <p class="text-gray-600 mb-3">房源详情页面提供特定房源的详细信息：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>图片轮播 - 展示房源的多角度照片</li>
                            <li>基本信息 - 包括价格、面积、位置等</li>
                            <li>房源特点 - 详细描述房源的各项特点</li>
                            <li>配套设施 - 列出房源包含的设施</li>
                            <li>联系方式 - 提供联系招商人员的方式</li>
                        </ul>
                        <p class="text-gray-600">底部操作栏提供预约看房和立即申请等快捷操作。</p>
                    </div>
                    
                    <div id="parkingDesc" class="hidden">
                        <p class="text-gray-600 mb-3">停车管理页面提供园区停车相关功能：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>停车场状态 - 显示当前停车场使用情况</li>
                            <li>我的车辆 - 管理已登记的车辆信息</li>
                            <li>车位查询 - 可视化展示停车位分布和状态</li>
                            <li>缴费记录 - 查看停车费用缴纳历史</li>
                        </ul>
                        <p class="text-gray-600">页面设计直观，便于用户快速了解停车场情况和管理自己的车辆。</p>
                    </div>
                    
                    <div id="paymentDesc" class="hidden">
                        <p class="text-gray-600 mb-3">账单支付页面集中管理各类费用缴纳：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>账单汇总 - 显示待缴费总额</li>
                            <li>账单列表 - 详细展示各类待缴费账单</li>
                            <li>支付方式 - 提供多种支付渠道选择</li>
                            <li>缴费记录 - 查看历史缴费情况</li>
                        </ul>
                        <p class="text-gray-600">页面设计清晰，支持一键缴费和单项缴费，操作便捷。</p>
                    </div>
                    
                    <div id="visitorDesc" class="hidden">
                        <p class="text-gray-600 mb-3">访客管理页面提供园区访客相关功能：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>访客预约 - 提前登记来访人员信息</li>
                            <li>访客记录 - 查看历史访客记录</li>
                            <li>通行码 - 生成和分享访客通行二维码</li>
                            <li>审核功能 - 审核访客申请并发送通知</li>
                        </ul>
                        <p class="text-gray-600">页面设计注重信息安全和流程便捷，支持多种访客登记方式。</p>
                    </div>
                    
                    <div id="repairDesc" class="hidden">
                        <p class="text-gray-600 mb-3">设备报修页面提供园区内设施设备的报修服务：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>报修类型 - 提供电力、水暖、网络等多种设备类型选择</li>
                            <li>故障描述 - 详细描述故障情况和上传故障图片</li>
                            <li>位置信息 - 选择故障设备所在位置</li>
                            <li>紧急程度 - 设置报修的紧急程度</li>
                            <li>预约时间 - 选择维修人员上门的预约时间</li>
                        </ul>
                        <p class="text-gray-600">页面设计简洁明了，报修流程清晰，操作便捷。</p>
                    </div>
                    
                    <div id="repairHistoryDesc" class="hidden">
                        <p class="text-gray-600 mb-3">报修记录页面展示用户的历史报修信息：</p>
                        <ul class="list-disc pl-5 text-gray-600 mb-3">
                            <li>状态分类 - 可按待处理、处理中、已完成等状态筛选</li>
                            <li>报修列表 - 展示报修的基本信息和处理状态</li>
                            <li>详情查看 - 点击可查看报修的详细信息和处理进度</li>
                            <li>评价功能 - 对已完成的报修进行评价和反馈</li>
                        </ul>
                        <p class="text-gray-600">页面采用列表卡片式设计，信息展示清晰，便于追踪报修进度。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面切换功能
        const pageButtons = document.querySelectorAll('.page-button');
        const pageFrame = document.getElementById('pageFrame');
        const pageTitle = document.getElementById('pageTitle');
        const descriptions = {
            'login.html': 'loginDesc',
            'home.html': 'homeDesc',
            'profile.html': 'profileDesc',
            'notice.html': 'noticeDesc',
            'repair.html': 'repairDesc',
            'repair-history.html': 'repairHistoryDesc',
            'water-service.html': 'waterServiceDesc',
            'water-service-apply.html': 'waterServiceApplyDesc',
            'housing-list.html': 'housingListDesc',
            'housing-detail.html': 'housingDetailDesc',
            'parking.html': 'parkingDesc',
            'payment.html': 'paymentDesc',
            'visitor.html': 'visitorDesc'
        };
        
        const pageTitles = {
            'login.html': '登录页面',
            'home.html': '首页',
            'profile.html': '个人中心',
            'notice.html': '公告页面',
            'repair.html': '设备报修',
            'repair-history.html': '报修记录',
            'water-service.html': '送水服务',
            'water-service-apply.html': '送水申请',
            'housing-list.html': '房源查询',
            'housing-detail.html': '房源详情',
            'parking.html': '停车管理',
            'payment.html': '账单支付',
            'visitor.html': '访客管理'
        };
        
        pageButtons.forEach(button => {
            button.addEventListener('click', () => {
                const page = button.getAttribute('data-page');
                
                // 更新iframe源
                pageFrame.src = page;
                
                // 更新按钮状态
                pageButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                
                // 更新描述
                pageTitle.textContent = pageTitles[page];
                
                // 隐藏所有描述
                Object.values(descriptions).forEach(id => {
                    document.getElementById(id).classList.add('hidden');
                });
                
                // 显示当前页面描述
                document.getElementById(descriptions[page]).classList.remove('hidden');
            });
        });
    </script>
</body>
</html>
